<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        广州 - 上海
        /
        2019-06-17
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="runFilters">
          <el-option
            v-for="(airport,index) in options.airport"
            :key="index"
            :label="airport"
            :value="airport"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="runFilters">
          <el-option
            v-for="(time,index) in options.flightTimes"
            :key="index"
            :label="`${time.from}:00-${time.to}:00`"
            :value="`${time.from},${time.to}`"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="runFilters">
          <el-option
            v-for="(company,index) in options.company"
            :key="index"
            :label="company"
            :value="company"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型" @change="runFilters">
          <el-option
            v-for="(size,index) in planeSizes"
            :key="index"
            :label="size.lable"
            :value="size.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Object,
    origin: Array
  },
  data() {
    return {
      airport: "", // 机场
      flightTimes: "", // 出发时间
      company: "", // 航空公司
      airSize: "", // 机型大小
      planeSizes: [
        {
          label: "大",
          value: "L"
        },
        {
          label: "中",
          value: "M"
        },
        {
          label: "小",
          value: "S"
        }
      ]
    };
  },
  methods: {
    runFilters() {
      //深拷贝原来的机票所有数据
      let newList = [...this.origin];
      //机场过滤
      if (this.airport) {
        newList = newList.filter(flight => {
          return flight.org_airport_name == this.airport;
        });
      }
      //时间过滤
      if (this.flightTimes) {
        newList = newList.filter(flight => {
          const flightDepHour = Number(flight.dep_time.split(":")[0]);
          //选择时间的格式是from,to 比如8点到12点 大于等于from小于to
          const fromHourSelected = Number(this.flightTimes.split(",")[0]);
          const toHourSelected = Number(this.flightTimes.split(",")[1]);
          return (
            flightDepHour >= fromHourSelected && flightDepHour < toHourSelected
          );
        });
      }
      //航空公司
      if (this.company) {
        newList = newList.filter(flight => {
          return flight.airline_name == this.company;
        });
      }
      //机型过滤
      if (this.airSize) {
        newList = newList.filter(flight => {
          return flight.plane_size == this.airSize;
        });
      }
      //经过所有过滤器之后,统一触发父组件的渲染
      this.$emit("setFlightsList", newList);
    },
    // 选择机场时候触发
    handleAirport(value) {
      //   const newList = this.origin.filter(flight => {
      //     return flight.org_airport_name == value;
      //   });
      //   this.$emit("setFlightsList", newList);
    },

    // 选择出发时间时候触发
    handleFlightTimes(value) {
      //   const newList = this.origin.filter(flight => {
      //     //出发时间的过滤有点不一样
      //     const flightDepHour = Number(flight.dep_time.split(":")[0]);
      //     //选择时间的格式是from,to 比如8点到12点 大于等于from小于to
      //     const fromHourSelected = Number(value.split(",")[0]);
      //     const toHourSelected = Number(value.split(",")[1]);
      //     return (
      //       flightDepHour >= fromHourSelected && flightDepHour < toHourSelected
      //     );
      //   });
      //   this.$emit("setFlightsList", newList);
    },

    // 选择航空公司时候触发change事件
    handleCompany(value) {
      //   const newList = this.origin.filter(flight => {
      //     return flight.airline_name == value;
      //   });
      //   this.$emit("setFlightsList", newList);
    },

    // 选择机型时候触发
    handleAirSize(value) {
      //   const newList = this.origin.filter(flight => {
      //     return flight.plane_size == value;
      //   });
      //   this.$emit("setFlightsList", newList);
    },

    // 撤销条件时候触发
    handleFiltersCancel() {
      //只需要情空所有的双向绑定
      this.airport = ""; // 机场
      this.flightTimes = ""; // 出发时间
      this.company = ""; // 航空公司
      this.airSize = ""; // 机型大小
      this.runFilters();
    }
  }
};
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>